import { useEffect, useState, useRef } from 'react';
import { Row, Col, Popover } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

const homework = {
  data: {
    result: {
      memo: '作业布置精选题，内容具体，有预计完成时间，体现分层。',
      list: [
        {
          id: 11,
          xxNo: '150622zgeqxjwdsxx',
          bjNo: 'xjwdsxx0201',
          kcName: '音乐',
          date: '2021-09-26 00:00:00',
          addOn: '2021-09-26 10:56:04',
          addBy: '白俊红',
          content: '我们的中国银行佛经low题目哦酷我',
          time: 0.5,
        },
        {
          id: 16,
          xxNo: '150622zgeqxjwdsxx',
          bjNo: 'xjwdsxx0201',
          kcName: '道德与法治22233331',
          date: '2021-09-26 00:00:00',
          addOn: '2021-09-26 10:53:56',
          addBy: '白俊红',
          content:
            '我咯嗯了哦嗯咯的嗯啦哦了哦咯几楼呀啊咯乐安居咯胡咯路我咯嗯了哦嗯咯的嗯啦哦了哦咯几楼呀啊咯乐安居咯胡咯路我咯嗯了哦嗯咯的嗯啦哦了哦咯几楼呀啊咯乐安居咯胡咯路',
          time: 1.5,
        },
        {
          id: 17,
          xxNo: '150622zgeqxjwdsxx',
          bjNo: 'xjwdsxx0201',
          kcName: '科学',
          date: '2021-09-26 00:00:00',
          addOn: '2021-09-26 10:55:31',
          addBy: '白俊红',
          content: '我刚来恁妮醒了风景到你防控到了到了到了哦可',
          time: 1,
        },
        {
          id: 11,
          xxNo: '150622zgeqxjwdsxx',
          bjNo: 'xjwdsxx0201',
          kcName: '音乐1',
          date: '2021-09-26 00:00:00',
          addOn: '2021-09-26 10:56:04',
          addBy: '白俊红',
          content: '我们的中国银行佛经low题目哦酷我',
          time: 0.5,
        },
        {
          id: 16,
          xxNo: '150622zgeqxjwdsxx',
          bjNo: 'xjwdsxx0201',
          kcName: '道德与法治22233332',
          date: '2021-09-26 00:00:00',
          addOn: '2021-09-26 10:53:56',
          addBy: '白俊红',
          content:
            '我咯嗯了哦嗯咯的嗯啦哦了哦咯几楼呀啊咯乐安居咯胡咯路我咯嗯了哦嗯咯的嗯啦哦了哦咯几楼呀啊咯乐安居咯胡咯路我咯嗯了哦嗯咯的嗯啦哦了哦咯几楼呀啊咯乐安居咯胡咯路',
          time: 1.5,
        },
        {
          id: 17,
          xxNo: '150622zgeqxjwdsxx',
          bjNo: 'xjwdsxx0201',
          kcName: '科学2',
          date: '2021-09-26 00:00:00',
          addOn: '2021-09-26 10:55:31',
          addBy: '白俊红',
          content: '我刚来恁妮醒了风景到你防控到了到了到了哦可',
          time: 1,
        },
        {
          id: 11,
          xxNo: '150622zgeqxjwdsxx',
          bjNo: 'xjwdsxx0201',
          kcName: '音乐2',
          date: '2021-09-26 00:00:00',
          addOn: '2021-09-26 10:56:04',
          addBy: '白俊红',
          content: '我们的中国银行佛经low题目哦酷我',
          time: 0.5,
        },
        {
          id: 16,
          xxNo: '150622zgeqxjwdsxx',
          bjNo: 'xjwdsxx0201',
          kcName: '道德与法治2223333',
          date: '2021-09-26 00:00:00',
          addOn: '2021-09-26 10:53:56',
          addBy: '白俊红',
          content:
            '我咯嗯了哦嗯咯的嗯啦哦了哦咯几楼呀啊咯乐安居咯胡咯路我咯嗯了哦嗯咯的嗯啦哦了哦咯几楼呀啊咯乐安居咯胡咯路我咯嗯了哦嗯咯的嗯啦哦了哦咯几楼呀啊咯乐安居咯胡咯路',
          time: 1.5,
        },
        {
          id: 17,
          xxNo: '150622zgeqxjwdsxx',
          bjNo: 'xjwdsxx0201',
          kcName: '科学3',
          date: '2021-09-26 00:00:00',
          addOn: '2021-09-26 10:55:31',
          addBy: '白俊红',
          content: '我刚来恁妮醒了风景到你防控到了到了到了哦可',
          time: 1,
        },
      ],
    },
  },
};

export default () => {
  const [sumTime, setSumTime] = useState(0);

  useEffect(() => {
    if (homework.data?.result?.list.length) {
      const totalTime = homework.data.result.list.reduce((pre, cur) => {
        // eslint-disable-next-line no-param-reassign
        pre += cur.time;
        return pre;
      }, 0);
      setSumTime(totalTime);
    }
  }, []);

  return (
    <div className={classNames(styles.wrapper)} style={{ display: 'flex' }}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1, width: 0 }}>
        <Col flex="52px">
          <Row className={classNames('linear-title', styles.title)} justify="center">
            <span>作业展示</span>
          </Row>
        </Col>
        <Col flex="32px">
          <Row className="data-table-row" wrap={false}>
            <Col flex="85px" className="header">
              学科
            </Col>
            <Col flex="auto" className="header">
              作业内容
            </Col>
            <Col flex="80px" className="header">
              预计用时
            </Col>
          </Row>
        </Col>
        <Col flex="auto" className="data-table-body">
          {homework.data?.result?.list.map((x) => (
            <Row key={x.kcName} className="data-table-row" wrap={false}>
              <Popover
                overlayClassName={styles.overlay}
                trigger="click"
                content={<p>{x.kcName}</p>}
              >
                <Col flex="85px">{x.kcName}</Col>
              </Popover>
              <Popover
                overlayClassName={styles.overlay}
                trigger="click"
                content={<p>{x.content}</p>}
              >
                <Col flex="auto">{x.content}</Col>
              </Popover>
              <Col flex="80px">
                <span>{`${x.time}分钟`}</span>
              </Col>
            </Row>
          ))}
        </Col>
        <Col flex="32px">
          <Row className="data-table-row" wrap={false}>
            <Col flex="auto" className="header" style={{ textAlign: 'right' }}>
              合计：
            </Col>
            <Col flex="80px" className="header">
              {`${sumTime}分钟`}
            </Col>
          </Row>
        </Col>
        {homework.data?.result?.memo && (
          <Col flex="32px">
            <Row className="no-border" style={{ color: '#FF8F1E' }}>
              <Col flex="auto" className={styles.memo}>
                备注：{homework.data.result.memo}
              </Col>
            </Row>
          </Col>
        )}
      </Row>
    </div>
  );
};
